<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <text class="title">首页</text>
    </view>
    
    <!-- 内容区域 -->
    <view class="content">
      <!-- 这里可以添加具体的内容组件 -->
      <text>欢迎使用 UniApp</text>
    </view>
    
    <!-- 底部导航栏 -->
    <view class="footer">
      <view class="tab-item" @click="switchTab(0)">
        <text class="iconfont">首页</text>
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item" @click="switchTab(1)">
        <text class="iconfont">分类</text>
        <text class="tab-text">分类</text>
      </view>
      <view class="tab-item" @click="switchTab(2)">
        <text class="iconfont">我的</text>
        <text class="tab-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 当前选中的tab
const currentTab = ref(0)

// 切换tab
const switchTab = (index: number) => {
  currentTab.value = index
}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.header {
  height: 88rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.content {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.footer {
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1rpx solid #eee;
  
  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rpx 0;
    
    .iconfont {
      font-size: 40rpx;
      color: #666;
    }
    
    .tab-text {
      font-size: 24rpx;
      color: #666;
      margin-top: 4rpx;
    }
    
    &.active {
      .iconfont,
      .tab-text {
        color: #007AFF;
      }
    }
  }
}
</style> 